import React, {Component} from 'react'
import {View, Text} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

class StarsCommon extends Component {
    static defaultProps = {
        starTotalCount: 3,
        activeCount: 1
    }

    constructor(props) {
        super(props)
        this.state = {
            starTotalCount: props.starTotalCount,
            activeCount: props.activeCount
        }   
    }


    render () {
        const {starTotalCount, activeCount} = this.state
        let stars = []
        for (let n = 0; n < activeCount; n++) {
            stars.push(<Icon name={'ios-star'} color={'#fc3d2c'} key={n} size={25}/>)
        }

        for (let n = 0; n < (starTotalCount - activeCount); n++) {
            stars.push(<Icon name={'ios-star-outline'} key={n + activeCount} size={25}/>)           
        }
        return (
            <View style={[{flexDirection: 'row'}, this.props.style]}>
                {
                   stars.map((star) => { return star})
                }
            </View>
        )
    }
}

export default StarsCommon